{#继承父模板#}
{% extends 'common/base.html' %}

{% load staticfiles %}

{#标题#}
{% block title %}满分餐厅｜暖心故事{% endblock title %}

{# 头部js #}
{% block head_js %}
    <script src="{% static 'js/story.js' %}"></script>
{% endblock head_js %}

{#页面主体#}
{% block body %}
<div class="main">

    <div class="topics">
        <div class="container">暖心故事</div>
    </div>

    <div class="single">
        <div class="container">

            <h3>{{ story.story_title }}</h3>

            <div class="extra">
                <time>{{ story.update_time }}</time>
                / by
                <span class="username">{{ story.story_auther }}</span>
            </div>

            <div class="story-con">
                <img class="single_img" src="{% static story.story_img %}" class="img-responsive" alt="" />
                <p>{{ story.story_desc|safe }}</p>
            </div>

            <div class="links">
                <ul>
                    <li class="praise_li"><a class="story_praise" href="javascript:"><span class="praise_response_pic glyphicon glyphicon-thumbs-up"></span><span class="praise_num">{{ story.story_praise }}</span></a></li>
                    <li><a class="show_response" href="javascript:"><span class="praise_response_pic glyphicon glyphicon-envelope"></span><span class="all_response_link">所有评论</span> (<span class="response_num">{{ story.story_response }}</span>)</a></li>
                </ul>
            </div>


            {#                所有评论#}
            <ul class="response_con">
                {% for response in story_responses %}
                    <li class="user_response">
                        <span class="response_user_pic glyphicon glyphicon-user"></span>
                        <span class="response_name">{{ response.user_name }}：</span>
                        <span class="response_desc">{{ response.response_story }}</span>
                        <br>
                        <time class="response_time">{{ response.update_time }}</time>
                    </li>
                {% endfor %}
                    <input type="hidden" class="response_flag">
            </ul>

            <div class="show_more_response">
                <a href="javascript:">查看更多</a>
            </div>

            <div class="no_response_tip">没有评论了哦，快来添加点评吧！</div>

            <div class="comments-area">
                <h2>故事感言：</h2>
                <form method="post" action="javascript:">
                    {% csrf_token %}
                    <input type="hidden" class="story_id" name="story_id" value="{{ story.id }}">
                    <p>
                        <label>姓名</label>
                        <span>*</span>
                        <input name="user_name" class="user_name" type="text" value="">
                    </p>

                    <p>
                        <div class="error_tip error_name">错误提示</div>
                        <div class="error_tip_python">{{ mess.error_name }}</div>
                    </p>


                    <p>
                        <label>评论</label>
                        <span>*</span>
                        <textarea name="response" class="response"></textarea>
                    </p>

                    <p>
                        <div class="error_tip error_msg">错误提示</div>
                        <div class="error_tip_python">{{ mess.error_msg }}</div>
                        <input class="submit_btn" type="submit" value="提交评论">
                    </p>
                </form>
            </div>


        </div>
    </div>
</div>

{#    评论成功，弹框提示#}
<div class="container">
<div class="pop_main row" id="pop">
    <div class="pop_con col-lg-4 col-lg-offset-4 col-md-6 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1">

        <div class="pop_title">×</div>

        <div class="pop_detail">
            <p class="pop_text">
                评论成功！<br>
                欢迎来品尝，美味一直都在 ^ ^
            </p>
        </div>

        <div class="pop_footer">
            还有<span id="count">5</span>秒自动关闭弹框
        </div>

    </div>
    <div class="mask"></div>
</div>
</div>



{% endblock body %}
